<!DOCTYPE html>
<html lang="zh">
<head><meta charset='UTF-8'>
<title>jQuery和CSS3炫酷3D旋转画廊特效插件 DEMO1_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<script src='js/prefixfree.min.js'></script>
<style class="cp-pen-styles">
body{width: 100%;height: 100%;background: #100000;font-family: '微软雅黑';}
p{color: #fff;}
.center{text-align: center;}
p a{color: #fff;}
div#carousel { 
  perspective: 1200px; 
  background: #100000; 
  padding-top: 10%; 
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner { 
  transform-style: preserve-3d; 
  height: 300px; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 2rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -6rem; 
  border-bottom: none; 
  line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }
a{color: #6c4176;text-decoration: none;}
.htmleaf-demo{width: 100%;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #6c4176;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#6c4176;color: #fff; }
</style>
</head>
<body>
<div id="carousel">
  <figure id="spinner">
  <img src="img/8.jpg" alt="">
  <img src="img/9.jpg" alt="">
  <img src="img/10.jpg" alt="">
  <img src="img/11.jpg" alt="">
  <img src="img/12.jpg" alt="">
  <img src="img/13.jpg" alt="">
  <img src="img/14.jpg" alt="">
  <img src="img/15.jpg" alt="">
</figure>
</div>
<span style=float:left class=ss-icon onclick="galleryspin('-')">&lt;</span>
<span style=float:right class=ss-icon onclick="galleryspin('')">&gt;</span>
<div class="htmleaf-demo center">
  <a href="index.html" class="current">simple</a>
  <a href="index2.html">Advance</a>
</div>
<p class="center">更多精彩内容请关注：<a href="http://www.htmleaf.com/" target="_blank">jQuery之家</a></p>
<script>
var angle = 0;
function galleryspin(sign) {
    spinner = document.querySelector('#spinner');
    if (!sign) {
        angle = angle + 45;
    } else {
        angle = angle - 45;
    }
    spinner.setAttribute('style', '-webkit-transform: rotateY(' + angle + 'deg); -moz-transform: rotateY(' + angle + 'deg); transform: rotateY(' + angle + 'deg);');
}
</script>
</body></html>